<template>
  <div class="lvcai-register">
    <div class="container">
      <div class="clearfix">
        <div class="fl register-text">
          <p class="big"><span class="bigger">绿采！</span>欢迎您的选择</p>
          <p class="normal">我们热爱蓝天，我们热爱白云，我们更加热爱我们这个大家庭-地球</p>
          <p class="normal">环保，从你我做起。我们竭诚为您提供优质的环保材料，为您的生活提供那一抹清新健康的绿色。</p>
          <p class="blue">我们在绿采等您！</p>
        </div>
        <div class="register-box fr clearfix">
          <ul class="clearfix">
            <li @click="cur=1" :class="{active:cur==1}" class="fr">企业注册</li>
            <li @click="cur=0" :class="{active:cur==0}" class="fl">个人注册</li>
          </ul>
          <div v-show="cur==0" class="register-person-form">
            <el-form :model="Register" ref="RegisterForm" label-width="0" class="RegisterForm">
              <el-form-item prop="phone" class="phone-input">
                  <el-input v-model="Register.phone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item prop="验证码" class="code">
                <el-input v-model="Register.sendcode" placeholder="请输入验证码"></el-input>
                <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==false">发送验证码</el-button>
                <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==true">{{btntxt}}
                </el-button>
              </el-form-item>
              <el-form-item prop="" class="file">
                  <el-radio label="1">我已阅读<span class="col-blue">《绿色条款》</span></el-radio>
              </el-form-item>
              <el-form-item class="register-person-btn">
                <el-button type="primary" @click="submitForm">提交</el-button>
              </el-form-item>
              <el-form-item class="register-person-btn">
                <p class="">已有账户？请<span class="col-blue">登录</span></p>
              </el-form-item>
            </el-form>
          </div>
          <div v-show="cur==1" class="register-com-form">
            <el-form :model="Register" ref="RegisterForm" label-width="0" class="RegisterForm">
              <el-form-item prop="phone">
                  <el-input v-model="Register.phone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item prop="验证码" class="code">
                <el-input v-model="Register.sendcode" placeholder="请输入验证码"></el-input>
                <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==false">发送验证码</el-button>
                <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==true">{{btntxt}}
                </el-button>
              </el-form-item>
              <el-form-item prop="">
                  <el-input  placeholder="公司名称简称"></el-input>
              </el-form-item>
              <el-form-item prop="">
                  <el-input  placeholder="营业执照公司名称"></el-input>
              </el-form-item>
              <el-form-item prop="">
                  <el-input  placeholder="真实姓名"></el-input>
              </el-form-item>
              <el-form-item prop="">
                  <el-input  placeholder="真实姓名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-select placeholder="请选择企业性质">
                  <el-option label="区域一" value=""></el-option>
                  <el-option label="区域二" value=""></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="" class="file">
                  <el-radio label="1">我已阅读<span class="col-blue">《绿色条款》</span></el-radio>
              </el-form-item>
              <el-form-item class="register-person-btn">
                <el-button type="primary" @click="submitForm">提交</el-button>
              </el-form-item>
              <el-form-item class="register-person-btn">
                <p class="">已有账户？请<span class="col-blue">登录</span></p>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'Register_person',
  data(){
    return{
      // activeName: 'first'
      cur:0 ,//默认选中第一个tab
       Register: {
                    phone: '',
                    sendcode: '',
                },
                disabled: false,
                time: 0,
                btntxt: "重新发送"
    }
  },
  methods:{
    //手机验证发送验证码
            sendcode() {
                const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
                if (this.Register.phone == '') {
                    this.$message({
                        message:'手机号不能为空',
                        center: true
                    })
                    return
                }
                if (!reg.test(this.Register.phone)) {
                    this.$message({
                        message:'请输入正确的手机号',
                        center:true
                    })
                    return
                } else {
                    console.log(this.Register.phone);
                    this.$message({
                        message: '发送成功',
                        type: 'success',
                        center:true
                    });
                    this.time = 60;
                    this.disabled = true;
                    this.timer();
                }
            },
            //60S倒计时
            timer() {
                if (this.time > 0) {
                    this.time--;
                    this.btntxt = this.time + "s后重新获取";
                    setTimeout(this.timer, 1000);
                } else {
                    this.time = 0;
                    this.btntxt = "获取验证码";
                    this.disabled = false;
                }
            },
            submitForm(){

            }
  },
  created(){
    this.$emit('public_header', false);
    this.$emit('public_headerhover', true);
    this.$emit('public_footer', true);
  }
}
</script>

<style>
 @import '../../../static/style/register_person';
</style>

